<template>
	<view class="container">
		<view class="page-body">
			<scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'">
				<view class="nav-left-item" @click="categoryClickMain(item,index)" :key="index" :class="index==categoryActive?'active':'bj'"
				 v-for="(item,index) in typelist">
					<view :class="index==categoryActive?'border-bj':''"></view>
					<view class="title"><text>{{item.name}}</text></view>
				</view>
			</scroll-view>
			<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll" :style="'height:'+height+'px'"
			 scroll-with-animation>
				<view class="nav-name"><text>{{title}}</text></view>
				<view :id="index===0?'first':''" class="nav-right-item" v-for="(item,index) in subCategoryList" :key="index">
					<view>
						<image class="item-image" :src="item.imageurl" />
					</view>
					<view class="item-info" >
						<view class="item-title">{{item.title}}</view>
						<view class="item-sub-title" style="overflow: hidden; height: 100upx;">{{item.subTitle}}</view>
						<view class="item-price">
							<text>￥{{item.price}}</text>
							<image src="http://yao.hayzon.com/static/goodlist/add.png"></image>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categoryList: [],
				title: '',
				typelist: [{
						name: '中西药品',
						code: 0,
						subList: [{
								imageurl: 'https://c1.yaofangwang.net/common/upload/medicine/261/261440/d0fb5793-6745-497d-ac1b-b9321bdeaedc1543.jpg_300x300.jpg',
								title: '999 感冒灵颗粒',
								subTitle: '解热镇痛。用于感冒引起的头痛，发热，鼻塞，流涕，咽痛。',
								price: '9.40'
							},
							{
								imageurl: 'https://c1.yaofangwang.net/18/1041/b6b2cc41d68eb0ade75010c9831d175e.jpg_300x300.jpg',
								title: '都乐 金嗓子喉片',
								subTitle: '疏风清热，解毒利咽，芳香辟秽。适用于改善急性咽炎所致的咽喉肿痛，干燥灼热，声音嘶哑。',
								price: '7.50' 
							},
							{
								imageurl: 'https://c1.yaofangwang.net/common/upload/medicine/303/303985/a130a474-393e-456d-9f1a-c8513dc4999f6832.jpg_300x300.jpg',
								title: '马应龙 马应龙麝香痔疮膏',
								subTitle: '精挑细选，功效十足。',
								price: '7.50'
							},
							{
								imageurl: 'https://c1.yaofangwang.net/common/upload/medicine/198/198195/e474c84d-0429-49cf-9950-67ac987f56f83037.jpg_300x300.jpg',
								title: '西比灵 盐酸氟桂利嗪胶囊',
								subTitle: '典型(有先兆)或非典型(无先兆)偏头痛的预防性治疗。由前庭功能紊乱引起眩晕的对症治疗。',
								price: '20.00'
							},
							{
								imageurl: 'https://c1.yaofangwang.net/common/upload/medicine/222/222881/77eb8a31-42c5-4496-8e43-c1bb654f71235500.jpg_300x300.jpg',
								title: '三金 三金片',
								subTitle: '清热解毒，利湿。用于下焦湿热所致的小便短赤、淋沥涩痛。。',
								price: '18.00'
							}
						]
					},
					{
						name: '养生保健',
						code: 1,
						subList: [{
								imageurl: 'https://c1.yaofangwang.net/18/2848/fa526c6729681ac151f4c48bb1e9d78a.jpg_300x300.jpg',
								title: '汤臣倍健 维生素C片',
								subTitle: '',
								price: '44.00'
							},
							{
								imageurl: 'https://c1.yaofangwang.net/18/3723/342ae40bea826755ec538f7ad05d60cd.jpg_300x300.jpg',
								title: '碧生源 常菁茶',
								subTitle: '',
								price: '50.70'
							},
							{
								imageurl: 'https://c1.yaofangwang.net/18/1513/2b58456c9e694db78a6e2f9d4fea3e2d.jpg_300x300.jpg',
								title: '汤臣倍健 大豆磷脂软胶囊',
								subTitle: '',
								price: '43.00'
							},
							{
								imageurl: 'https://c1.yaofangwang.net/18/2665/83e4b3f5f24e93e38d46b29b42efbd83.jpg_300x300.jpg',
								title: '汤臣倍健 天然维生素E软胶囊',
								subTitle: '',
								price: '45.00'
							},
							{
								imageurl: 'https://c1.yaofangwang.net/18/1718/1bbaac8f934fdf51069939474421a4dc.jpg_300x300.jpg',
								title: '养生堂 天然维生素C咀嚼片',
								subTitle: '',
								price: '65.00'
							}
						]
					},
					{
						name: '医疗器械',
						code: 2,
						subList: [{
								imageurl: 'https://c1.yaofangwang.net/common/upload/medicine/221/221411/a7f8f84a-8b92-430e-9279-7c87281f1e002239.jpg_300x300.jpg',
								title: '天和 骨通贴膏',
								subTitle: '祛风散寒，活血通络，消肿止痛。用于寒湿阻络兼血瘀证之局部关节疼痛、肿胀、麻木重着、屈伸不利或活动受限。',
								price: '13.60'
							},
							{
								imageurl: 'https://c1.yaofangwang.net/common/upload/medicine/261/261053/e025e8af-b348-4b57-94fe-ed12e4600ef11582.jpg_300x300.jpg',
								title: '碘酊',
								subTitle: '宫廷秘方，古法熬制，改善...',
								price: '1.00'
							},
							{
								imageurl: 'https://c1.yaofangwang.net/common/upload/medicine/216/216956/06bb8e60-c350-47d1-b8a1-2c76b9d39beb4178.jpg_300x300.jpg',
								title: '奇正 消痛贴膏',
								subTitle: '活血化瘀，消肿止痛。用于急慢性扭挫伤、跌打瘀痛、骨质增生、风湿及类风湿疼痛，亦用于落枕、肩周炎、腰肌劳损和陈旧性伤痛等。',
								price: '22.00'
							},
							{
								imageurl: 'https://c1.yaofangwang.net/common/upload/medicine/519/519844/a760c571-206c-4f8e-8039-5b4cd4644eff8326.jpg_300x300.jpg',
								title: '【奇正】消痛贴膏(OTC)',
								subTitle: '活血化瘀，消肿止痛。用于急慢性扭挫伤、跌打瘀痛、骨质增生、风湿及类风湿疼痛，亦用于落枕、肩周炎、腰肌劳损和陈旧性伤痛等。',
								price: '8.00'
							}
						]
					},
					{
						name: '计生用品',
						code: 3,
						subList: [{
								imageurl: 'https://c1.yaofangwang.net/19/2308/0dcdf2890b2c920ec20dca92b27193fa.jpg_300x300.jpg',
								title: '金毓婷 左炔诺孕酮片',
								subTitle: '用于女性紧急避孕，即在无防护措施或其他避孕方法偶然失误时使用。',
								price: '10.45'
							},
							{
								imageurl: 'https://c1.yaofangwang.net/18/2426/9a492cfa83460823e0599cc0b2c8484d.jpg_300x300.jpg',
								title: '毓婷 左炔诺孕酮片',
								subTitle: '用于女性紧急避孕，即在无防护措施或其他避孕方法偶然失误时使用。',
								price: '8.00'
							},
							{
								imageurl: 'https://c1.yaofangwang.net/common/upload/medicine/534/534141/2db06db4-eddd-4ced-a9d7-a55801c2df698085.jpg_300x300.jpg',
								title: '仙琚 左炔诺孕酮肠溶胶囊',
								subTitle: '用于女性紧急避孕，即在无防护措施或其他避孕方法偶然失误时使用。',
								price: '11.94'
							},
							{
								imageurl: 'https://c1.yaofangwang.net/19/1864/727e2db66f7113a555d3cfd941b91538.jpg_300x300.jpg',
								title: '丹媚 左炔诺孕酮肠溶片',
								subTitle: '用于女性紧急避孕，即在无防护措施或其他避孕方法失误时使用；这些失误包括避孕套滑脱或破裂、体外排精失控、或安全期计算失误等',
								price: '10.00'
							}
						]
					},
					{
						name: '中药饮片',
						code: 4,
						subList: [{
								imageurl: 'https://c1.yaofangwang.net/18/3913/b94ad1d25876aa93c8ad59f8ad37cdb7.jpg_300x300.jpg',
								title: '京丰 灵芝孢子粉胶囊',
								subTitle: '健脾益气，养心安神。用于心脾两虚，病后体弱，肿瘤患者的辅助治疗。',
								price: '55.00'
							},
							{
								imageurl: 'https://c1.yaofangwang.net/18/2321/9f9aec7453e36239b6ec9cea1e7c598c.jpg_300x300.jpg',
								title: '康美 枸杞子',
								subTitle: '宫廷秘方，古法熬制，改善...',
								price: '¥24.00'
							},
							{
								imageurl: 'https://c1.yaofangwang.net/common/upload/medicine/628/628872/f3bb6a87-ebd2-4159-a02a-83a2c76bec3d9921.jpg_300x300.jpg',
								title: '润肠通便茶',
								subTitle: '润肠通便。用于热结便秘的辅助治疗。',
								price: '17.95'
							},
							{
								imageurl: 'https://c1.yaofangwang.net/18/1145/14f2347bc210a68ac4010d5651acd44f.jpg_300x300.jpg',
								title: '【康美】陈皮',
								subTitle: '滋阴润肺，祛除痰湿。',
								price: '9.60'
							}
						]
					},
					{
						name: '美容护肤',
						code: 5,
						subList: [{
								imageurl: 'https://c1.yaofangwang.net/18/3827/c2f98f430dce69d0cfef6f6d5e561fa4.jpg_300x300.jpg',
								title: '密丽 除疤膏',
								subTitle: '软坚散结，活血消疤。用于因烧伤、烫伤、疮痈、创伤等所致的增生性疤痕的辅助治疗。',
								price: '42.09'
							},
							{
								imageurl: 'https://c1.yaofangwang.net/19/2413/ad388ab4fe38c5665769f2c923826971.jpg_300x300.jpg',
								title: '芙原 积雪苷霜软膏.',
								subTitle: '有促进创伤愈合作用。用于治疗外伤，手术创伤，烧伤，疤痕疙瘩及硬皮病。',
								price: '13.00'
							},
							{
								imageurl: 'https://c1.yaofangwang.net/common/upload/medicine/267/267153/ab122f2b-4063-4bd2-aa12-d9a515a481888744.jpg_300x300.jpg',
								title: '璇美 疤痕止痒软化乳膏',
								subTitle: '活血柔皮，除湿止痒。用于灼伤或手术后的增殖性疤痕等。',
								price: '25.00'
							},
							{
								imageurl: 'https://c1.yaofangwang.net/common/upload/medicine/571/571647/030eac00-8f2f-4383-ad35-2d72406c812f8913.jpg_300x300.jpg',
								title: '润伊容胶囊',
								subTitle: '傣医：别菲解逼。兵休占，兵那干。中医：疏风清热，解毒消痤。用于风热上逆所致的痤疮、黄褐斑。',
								price: '17.67'
							}
						]
					},
					// {
					// 	name: '祛湿气',
					// 	code: 6,
					// 	subList:[{
					// 		imageurl:'1.png',
					// 		title:'枇杷秋梨膏|古法工艺。浓缩秋梨汁甘草枇杷露...',
					// 		subTitle:'百年古法，润肺润肤',
					// 		price:38
					// 	},
					// 	{
					// 		imageurl:'2.png',
					// 		title:'双花秋梨膏|一大罐添加金银花甘草等口感滋润酸...',
					// 		subTitle:'宫廷秘方，古法熬制，改善...',
					// 		price:38
					// 	},
					// 	{
					// 		imageurl:'3.png',
					// 		title:'莲花双果茶',
					// 		subTitle:'精挑细选，功效十足。',
					// 		price:38
					// 	},
					// 	{
					// 		imageurl:'4.png',
					// 		title:'清肺茶',
					// 		subTitle:'滋阴润肺，祛除痰湿。',
					// 		price:96
					// 	}]
					// },
					// {
					// 	name: '助消化',
					// 	code: 7,
					// 	subList:[{
					// 		imageurl:'1.png',
					// 		title:'枇杷秋梨膏|古法工艺。浓缩秋梨汁甘草枇杷露...',
					// 		subTitle:'百年古法，润肺润肤',
					// 		price:38
					// 	},
					// 	{
					// 		imageurl:'2.png',
					// 		title:'双花秋梨膏|一大罐添加金银花甘草等口感滋润酸...',
					// 		subTitle:'宫廷秘方，古法熬制，改善...',
					// 		price:38
					// 	},
					// 	{
					// 		imageurl:'3.png',
					// 		title:'莲花双果茶',
					// 		subTitle:'精挑细选，功效十足。',
					// 		price:38
					// 	},
					// 	{
					// 		imageurl:'4.png',
					// 		title:'清肺茶',
					// 		subTitle:'滋阴润肺，祛除痰湿。',
					// 		price:96
					// 	}]
					// },
					// {
					// 	name: '润肌肤',
					// 	code: 8,
					// 	subList:[{
					// 		imageurl:'1.png',
					// 		title:'枇杷秋梨膏|古法工艺。浓缩秋梨汁甘草枇杷露...',
					// 		subTitle:'百年古法，润肺润肤',
					// 		price:38
					// 	},
					// 	{
					// 		imageurl:'2.png',
					// 		title:'双花秋梨膏|一大罐添加金银花甘草等口感滋润酸...',
					// 		subTitle:'宫廷秘方，古法熬制，改善...',
					// 		price:38
					// 	},
					// 	{
					// 		imageurl:'3.png',
					// 		title:'莲花双果茶',
					// 		subTitle:'精挑细选，功效十足。',
					// 		price:38
					// 	},
					// 	{
					// 		imageurl:'4.png',
					// 		title:'清肺茶',
					// 		subTitle:'滋阴润肺，祛除痰湿。',
					// 		price:96
					// 	}]
					// },
					// {
					// 	name: '调肝肾',
					// 	code: 9,
					// 	subList:[{
					// 		imageurl:'1.png',
					// 		title:'枇杷秋梨膏|古法工艺。浓缩秋梨汁甘草枇杷露...',
					// 		subTitle:'百年古法，润肺润肤',
					// 		price:38
					// 	},
					// 	{
					// 		imageurl:'2.png',
					// 		title:'双花秋梨膏|一大罐添加金银花甘草等口感滋润酸...',
					// 		subTitle:'宫廷秘方，古法熬制，改善...',
					// 		price:38
					// 	},
					// 	{
					// 		imageurl:'3.png',
					// 		title:'莲花双果茶',
					// 		subTitle:'精挑细选，功效十足。',
					// 		price:38
					// 	},
					// 	{
					// 		imageurl:'4.png',
					// 		title:'清肺茶',
					// 		subTitle:'滋阴润肺，祛除痰湿。',
					// 		price:96
					// 	}]
					// },
					// {
					// 	name: '祛痤疮',
					// 	code: 10,
					// 	subList:[{
					// 		imageurl:'1.png',
					// 		title:'枇杷秋梨膏|古法工艺。浓缩秋梨汁甘草枇杷露...',
					// 		subTitle:'百年古法，润肺润肤',
					// 		price:38
					// 	},
					// 	{
					// 		imageurl:'2.png',
					// 		title:'双花秋梨膏|一大罐添加金银花甘草等口感滋润酸...',
					// 		subTitle:'宫廷秘方，古法熬制，改善...',
					// 		price:38
					// 	},
					// 	{
					// 		imageurl:'3.png',
					// 		title:'莲花双果茶',
					// 		subTitle:'精挑细选，功效十足。',
					// 		price:38
					// 	},
					// 	{
					// 		imageurl:'4.png',
					// 		title:'清肺茶',
					// 		subTitle:'滋阴润肺，祛除痰湿。',
					// 		price:96
					// 	}]
					// }
				],
				subCategoryList: [],
				height: 0,
				categoryActive: 0,
				scrollTop: 0,
				scrollHeight: 0
			}
		},
		methods: {
			scroll(e) {
				this.scrollHeight = e.detail.scrollHeight;
			},
			categoryClickMain(categroy, index) {
				console.log(index)
				this.categoryActive = index;
				this.title = this.typelist[index].name;
				this.subCategoryList = this.typelist[index].subList;
				this.scrollTop = -this.scrollHeight * index;
			},
			getCategory() {
				this.subCategoryList = this.typelist[0].subList;
				this.title = this.typelist[0].name;
			},
			navigateTo() {
				uni.navigateTo({
					url: 'product'
				})
			}
		},
		onLoad: function() {
			this.getCategory();
			this.height = uni.getSystemInfoSync().windowHeight;
		}
	}
</script>

<style>
	.nav-name {
		height: 80upx;
		line-height: 80upx;
		color: #666666;
		padding-left: 11upx;
	}

	.item-info {
		margin: 10upx;
		width: 55%;
		margin-right: 10upx;
		position: relative;
	}

	.item-sub-title {
		color: #999999;
		font-size: 0.9em;
	}

	.item-price {
		color: #eb544d;
		margin-top: 10upx;
		bottom: 0px;
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.item-price image {
		width: 40upx;
		height: 40upx;
		vertical-align: middle;
		float: right;
		margin-top: 5upx;
	}

	.container {
		/* background-image: url('http://yao.hayzon.com/static/goodlist/bj.png');
		background-size: 100%;
		background-repeat: no-repeat; */
	}

	.border-bj {
		width: 5upx;
		background-color: #eb544d;
	}

	.page-body {
		display: flex;
		margin-top: 3upx;
	}

	.nav {
		display: flex;
		width: 100%;
	}

	.nav-left {
		width: 20%;
	}

	.nav-left-item {
		height: 98upx;
		border-bottom: solid 1px #ebecef;
		font-size: 30upx;
		display: flex;
	}

	.nav-right {
		width: 80%;
		background-color: #ffffff;
	}

	.nav-right-item {
		width: 100%;
		height: 220upx;
		float: left;
		padding: 11upx;
		font-size: 28upx;
		display: flex;
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.active {
		color: #323233;
		font-weight: bold;
		background-color: #ffffff;
	}

	.bj {
		background-color: #f8f8f8;
		color: #8b8c8e;
	}

	.item-image {
		width: 220upx;
		height: 220upx;
	}
</style>
